<template>
  <div class='container'>
    <el-card class="box-card">
      <div class="box">
        <span class="explain">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" icon="el-icon-edit" class="newly" size="small" @click="SkipPage"><span class="questions" >新增试题</span></el-button>
      </div>
  <div  class="text item">
<!-- 表单 -->
  <el-form ref="form" label-width="80px">
    <el-row>
      <el-col :span="6">
        <el-form-item label="学科">
            <el-select v-model="DataSystem.subjectID"  @change="GetCatalogList">
              <el-option :label="item.label" :value="item.value" v-for="item in subjectList" :key="item.value"></el-option>
            </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
          <el-form-item label="二级目录">
              <el-select v-model="DataSystem.catalogID" @change="GetsubjectList" >
                <el-option :label="item.label" :value="item.value" v-for="item in catalogList" :key="item.id"></el-option>
              </el-select>
          </el-form-item>
      </el-col>
      <el-col :span="6">
          <el-form-item label="标签">
              <el-select v-model="DataSystem.tags" >
                <el-option :label="item.label" :value="item.value" v-for="item in LabelList" :key="item.id"></el-option>
              </el-select>
          </el-form-item>
      </el-col>
      <el-col :span="6">
          <el-form-item label="关键字">
              <el-input v-model="DataSystem.keyword"></el-input>
          </el-form-item>
      </el-col>
      <el-col  :span="6">
        <el-form-item label="试题类型">
            <el-select v-model="DataSystem.questionType" >
                <el-option :label="item.label" :value="item.value" v-for="item in QuestionTypeList" :key="item.id"></el-option>
            </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="难度">
            <el-select v-model="DataSystem.diffculty">
              <el-option :label="item.label" :value="item.value" v-for="item in difficultyList" :key="item.id"></el-option>
            </el-select>
        </el-form-item>
      </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
              <el-select v-model="DataSystem.direction" >
                <el-option :label="item" :value="item" v-for="item in directionList" :key="item.id"></el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
              <el-select v-model="DataSystem.creatorID">
                <el-option :label="item.username" :value="item.id" v-for="item in Administrator" :key="item.id"></el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注">
              <el-input v-model="DataSystem.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
               <el-input v-model="DataSystem.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
              <el-select placeholder="请选择" style="width:50%" v-model="DataSystem.province" @change="urbanList">
                <el-option :label="item" :value="item" v-for="item in CityList" :key="item.id"></el-option>
              </el-select>
              <el-select placeholder="请选择" style="width:50%" v-model="DataSystem.city">
                <el-option :label="item" :value="item" v-for="item in cantonal" :key="item.id"></el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <!-- 点击清除 或 搜索 按钮 -->
        <el-col :span="6" style="text-align: right;">
            <el-button size="small" @click="eliminate">清除</el-button>
            <el-button size="small" type="primary" @click="search">搜索</el-button>
        </el-col>
    </el-row>
  </el-form>
<!-- 提示数据共多少条 -->
  <el-alert :title="titleList" show-icon></el-alert>
  </div>
  <el-tabs  v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="全部" name="null"></el-tab-pane>
    <el-tab-pane label="待审核" name="0"></el-tab-pane>
    <el-tab-pane label="已审核" name="1"></el-tab-pane>
    <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
  </el-tabs>
<!-- 表格 -->
    <el-table
    :data="List"  style="width: 100%" >
    <el-table-column prop="number" label="试题编号"  width="150">
    </el-table-column>
    <el-table-column prop="subject" label="学科"  width="150">
    </el-table-column>
    <el-table-column prop="catalog" label="目录"  width="150">
    </el-table-column>
      <el-table-column prop="questionType" label="题型"  width="150">
        <template #default="{row}">
        {{questionFormat(row.questionType)}}
        </template>
    </el-table-column>
    <el-table-column   prop="question" label="题干"  width="150">
      <template #default="{row}">
        {{topicFormat(row.question)}}
        </template>
    </el-table-column>
    <el-table-column prop="addDate" label="录入时间"  width="150">
      <template #default="{row}">
        {{timeFormat(row.addDate)}}
        </template>
    </el-table-column>
      <el-table-column prop="difficulty" label="难度"  width="150">
        <template #default="{row}">
        {{difficultyFormat(row.difficulty)}}
        </template>
    </el-table-column>
      <el-table-column prop="creator" label="录入人"   width="150">
    </el-table-column>
      <el-table-column prop="chkState" label="审核状态"  width="150">
           <template #default="{ row }">
              {{ auditList(row.chkState) }}
            </template>
      </el-table-column>
    <el-table-column prop="chkRemarks" label="审核意见"  >
    </el-table-column>
    <el-table-column prop="chkUser" label="审核人" >
    </el-table-column>
    <el-table-column prop="publishState" label="发布状态" >
       <template #default="{row}">
        {{stateFormat(row.publishState)}}
        </template>
    </el-table-column>
    <el-table-column prop="address" label="操作" width="200%" fixed="right" style="text-aline:center">
             <template #default="{row}">
              <el-button type="text" size="small" @click="infoDialog(row)">预览</el-button>
              <el-button type="text" size="small" :disabled="row.chkState === 0 ? false : true" @click="audit(row.id)">审核</el-button>
              <el-button type="text" size="small" @click="updateQuestion(row.id)" :disabled="row.publishState === 1 ? true : false" >修改</el-button>
              <el-button type="text" size="small" @click="upDownState(row.id,$event)">{{ row.publishState === 1 ? '下架' : '上架'  }}</el-button>
              <el-button type="text" size="small" @click="deleteList(row)" :disabled="row.publishState === 1 ? true : false" >删除</el-button>
             </template>
    </el-table-column>
  </el-table>
<!-- 分页效果 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
            background>
      </el-pagination>
</el-card>
<!-- 审核弹窗-->
      <questions-check
        :auditDialogFormVisible="auditDialogFormVisible"
        :auditId="auditId"
        @closeAuditDialogFormVisible="closeAuditDialogFormVisible"
        @getquestCheckList="GetList"
      ></questions-check>
<!-- 弹框 -->
<questionsPreviewVue :dialog-visible="dialogVisible" @close-dialog="closeDialog"
    :filterlist='filterlist'></questionsPreviewVue>
</div>
</template>

<script>
import { choice, remove, detail, choicePublish } from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as muluist } from '@/api/hmmm/directorys.js'
import { simple as BqList } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction, publishType } from '@/api/hmmm/constants.js'
import { simple as people } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { html2Text } from '@/utils/index.js'
import dayjs from 'dayjs'
import questionsPreviewVue from '@/module-hmmm/components/questions-preview'
import QuestionsCheck from '@/module-hmmm/components/questions-check'

export default {
  name: 'QuestionChoice',
  components: {
    questionsPreviewVue,
    QuestionsCheck
  },
  data () {
    return {
      DataSystem: {
        // subjectID: '', // 学科
        // catalogID: '', // 二级目录
        // keyword: '', // 关键字
        // creatorID: '', // 录入人
        // number: '', // 试题编号
        // quertion: '', // 题干
        // questionType: '', // 题型
        // tags: '', // 标签名称
        // diffculty: '', // 难度
        // direction: '', // 方向
        // remarks: '', // 题目备注
        // shortName: '', // 企业名称
        // province: '', // 所在地省份
        // city: ''// 所在地城市
      },
      List: [],
      params: {
        page: 1, // 当前页
        pagesize: 5, // 每页显示条数
        chkState: undefined // 状态

      },
      activeName: null,
      filterlist: [],
      subjectList: [], // 存放学科目录列表数据
      catalogList: [], // 存放简单目录列表数据
      LabelList: [], // 存放简单标签列表数据
      QuestionTypeList: [], // 存放试题类型数据
      difficultyList: [], // 难度数据
      directionList: [], // 存放方向数据
      CityList: provinces(), // 城市
      cantonal: citys(), // 市区
      Administrator: [], // 录入人管理员
      total: null, // 数据总量
      dialogVisible: false,
      auditDialogFormVisible: false,
      auditId: undefined,
      disabled: false
      // chkType: [], // 审核数据处理
      // publishType: []// 状态数据处理
    }
  },
  mounted () {
    this.GetList()
    this.GetsimpleList()
    this.DataBase()
    this.DataEntryClerk()
  },
  methods: {
    // 获取数据渲染列表
    async GetList () {
      const res = await choice(this.params)
      this.List = res.data.items
      this.total = res.data.counts
      // console.log(res)
    },
    //  渲染下拉菜单
    DataBase () {
      this.QuestionTypeList = questionType
      this.directionList = direction
      this.difficultyList = difficulty
      // console.log(provinces)
      // this.CityList = datas
    },
    // 处理题型格式
    questionFormat (id) {
      const map = {}
      questionType.forEach(item => {
        map[item.value] = item.label
      })
      return map[id]
    },
    // 处理题干格式
    topicFormat (val) {
      return html2Text(val)
    },
    // 处理时间格式
    timeFormat (value) {
      return dayjs(value).format('YYYY-MM-DD')
    },
    // 处理难度格式
    difficultyFormat (id) {
      const map = {}
      difficulty.forEach(item => {
        map[item.value] = item.label
      })
      return map[id]
    },
    // 审核状态数据处理
    // auditFormat (id) {
    //   const map = {}
    //   chkType.forEach(item => {
    //     map[item.value] = item.label
    //   })
    //   // console.log(map[id])
    //   return map[id]
    // },
    // 发布状态数据处理
    stateFormat (id) {
      const map = {}
      publishType.forEach(item => {
        map[item.value] = item.label
      })
      return map[id]
    },
    // 获取简单学科列表
    async GetsimpleList () {
      const res = await simple()
      this.subjectList = res.data
    },
    // 获取简单目录列表
    async GetCatalogList () {
      this.DataSystem.catalogID = ''
      this.DataSystem.tags = ''
      const res = await muluist({ subjectID: this.DataSystem.subject })
      this.catalogList = res.data
    },
    // 获取标签简单列表
    async GetsubjectList () {
      this.DataSystem.tags = ''
      const res = await BqList({ subjectID: this.DataSystem.subject })
      this.LabelList = res.data
    },
    // 获取录入人
    async DataEntryClerk () {
      const res = await people()
      this.Administrator = res.data
    },
    // 点击城市时触发
    async urbanList () {
      this.DataSystem.city = ''
      const res = await citys(this.DataSystem.province)
      this.cantonal = res
    },
    // 改变了每页数据条数的时候，触发这个事件
    handleSizeChange (newSize) {
      // console.log(newSize) // 得到最新的，每页 显示 newSize 条数据
      this.params.pagesize = newSize
      // 调用获取文章的方法，重新使用新的参数发送请求，获取数据，更新页面
      this.GetList()
    },
    // 页码改变的时候，触发的事件
    handleCurrentChange (page) {
      // console.log(page) // 表示点击的，或者跳转的最新的页码值
      this.params.page = page
      this.GetList()
    },
    // 页面跳转
    SkipPage () {
      this.$router.push('/questions/new')
    },
    // 点击删除
    deleteList (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(id)
        this.$message.success('删除成功')
        this.GetList()
      }).catch(() => {
      })
    },
    // 子传父亲接受 关闭dialog
    closeDialog () {
      this.dialogVisible = false
    },
    // 审核筛选
    async handleClick (tab, ement) {
      // console.log(tab)
      // console.log(tab, ement)
      this.params.chkState = tab.name
      // console.log(tab.name)
      if (tab.name === 'null') {
        delete this.params.chkState
      }
      await this.GetList()
    },
    // 审核状态枚举
    auditList (value) {
      const MAP = {
        0: '待审核',
        1: '通过',
        2: '拒绝'

      }
      return MAP[value]
    },
    // 点击预览
    async infoDialog (row) {
      this.dialogVisible = true
      const res = await detail(row)
      // console.log(res)
      this.filterlist = res.data
    },
    // 点击修改
    updateQuestion (id) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id: id
        }
      })
    },
    // 上下架
    upDownState (id, e) {
      // console.log(this.questionList.publishState)
      // if (e.target.innerText === '上架') {
      //   this.disabled = false
      // } else {
      //   this.disabled = true
      // }
      // 1 上架 0 下架
      // 判断当前标签文字是否为下架，为下架，调接口传参，改变文字，改变，状态
      // console.log(e.target.innerText)
      // console.log(this)
      // 进行下架操作
      this.$confirm(`确认${e.target.innerText}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (e.target.innerText === '下架') {
          // 调接口
          await choicePublish({ id: id, publishState: 0 })
        } else {
          await choicePublish({ id: id, publishState: 1 })
        }
        // 重新渲染
        this.GetList()
        this.$message({
          type: 'success',
          message: `${e.target.innerText}成功!`
        })
      }).catch(() => {})
    },

    // 点击审核
    audit (id) {
      this.auditDialogFormVisible = true
      this.auditId = id
      console.log(id)
    },
    // 关闭审核弹窗
    closeAuditDialogFormVisible () {
      this.auditDialogFormVisible = false
    },
    // 点击搜索
    async search () {
      const res = await choice(this.DataSystem)
      this.List = res.data.items
    },
    // 清除
    eliminate () {
      this.$refs.form.resetFields()
      this.DataSystem = {}
      this.GetList()
    }
  },
  computed: {
    titleList () {
      return `数据一共${this.total}条`
    }
  }
}
</script>

<style scoped lang="scss">
.el-card {
  margin: 5px 5px;
  .el-select {
    width: 100%;
  }
  .el-alert {
    margin-bottom: 15px;
  }
}
  .box{
    display: flex;
    justify-content: space-between;
    margin: 10px;
    .explain{
      font-size: 12px;
     color: pink;
    }
    .newly{
     width: 100px;
    }
  }

</style>
